<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画图</title>
    <link rel="stylesheet" href="./paintboardPro-font/iconfont.css">
    <style>
        /* ------------------------------上面是字体图标--------------------------------- */

        body,
        html {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;

            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;

        }

        .svgContainer {
            width: 100%;
            height: 100%;
            background-color: rgb(255, 255, 255);
            position: relative;
            overflow: hidden;
        }

        .svgparent {
            width: 100%;
            height: 100%;
        }

        .toolContainer {
            position: absolute;
            display: flex;
            justify-content: space-between;
            height: 450px;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
        }

        .tool-rangeBox {
            position: relative;
            width: 84px;
        }

        .toolbar {
            border-radius: 0px 30px 30px 0;
            width: 45px;
            height: 450px;
            border: 2px solid rgb(255, 255, 255);
            box-shadow: 0px 1px 9px 0px rgba(90, 90, 90, 0.308);
            background-color: rgb(94 170 255);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

        .toolbar>label {
            /*字体图标*/
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 43px;
            border: solid 2px rgb(94 170 255);
            border-radius: 20px;
            font-size: 25px;
            color: rgb(255, 255, 255);
            background-color: rgb(94 170 255);
            box-shadow: 0px 0px 0px 0px #00000000;
            transition: 0.4s ease;
        }

        .toolbar>label:hover {
            transition: 0.4s ease;
            border: solid 2px rgb(255, 255, 255);
        }

        .tool-rangeBox .toolbar label.selected {
            transition: 0.4s ease;
            background-color: #fff;
            width: 45px;
            color: #3496f8;
            box-shadow: 3px 1px 5px 0px #6988e17a;

        }

        .tool-rangeBox input[name="toolselect"] {
            visibility: hidden;
            position: absolute;
            top: 0;

        }

        /*  背景色和FIll*/
        label.back-bgc,
        label.forth-bgc {
            position: absolute;
            display: inline-block;
            width: 35px;
            height: 35px;
            border-radius: 10px;
            box-shadow: 2px 3px 3px 0px rgb(0 0 0 / 12%);
        }

        label.back-bgc {
            top: 385px;
            left: 88px;
            background-color: rgb(97, 100, 250);
        }

        label.forth-bgc {
            top: 402px;
            left: 102px;
            background-color: rgb(255, 156, 206);
        }

        label.fill {
            color: rgb(214, 214, 214);
            width: 35px;
            height: 35px;
            position: absolute;
            top: 340px;
            left: 55px;
            border-radius: 12px;
            box-shadow: 0 0 0 0 rgba(17, 4, 4, 0);
            border: solid 2px rgb(93, 93, 93);
            transform: translateY(0px);
            transition: 0.3s ease;
            cursor: pointer;
        }

        .tool-rangeBox input[id="fillstart-input"]:checked~label.fill {
            transition: 0.3s ease;
            transform: translateY(-4px);
            border: solid 1px rgb(255, 255, 255);
            box-shadow: 0px 5px 5px 0 #00440933;
        }

        .tool-rangeBox .fillstart {
            position: absolute;
            text-align: center;
            line-height: 20px;
            border-radius: 6px;
            width: 35px;
            height: 20px;
            background-color: rgb(95, 95, 95);
            color: rgb(216, 216, 216);
            top: 383px;
            left: 55px;
            font-size: 12px;
            transition: 0.4s ease;
            cursor: pointer;
        }

        .tool-rangeBox input[id="fillstart-input"]:checked~.fillstart {
            background-color: rgb(74, 238, 115);
            color: #333;
        }

        /* .tool-rangeBox #fill {
            visibility: hidden;

        } */

        .tool-rangeBox>label input[type="color"],
        .tool-rangeBox input[id="fillstart-input"] {
            /*背景色*/
            visibility: hidden;
            position: absolute;
            top: 0;
        }


        /* 笔画大小 滑条*/
        em {
            position: absolute;
            top: 24px;
            left: 57px;
            width: 30px;
            height: 30px;
            color: rgb(130, 121, 253);
            font-weight: bolder;
            border-radius: 999px;
            font-style: normal;
            font-size: 18px;
            text-align: center;
            line-height: 30px;
            background-color: rgb(213, 228, 255);
            opacity: 0;
            transition: 2s ease;
        }

        .range:hover+em {
            transition: 0.3s ease;
            opacity: 1;
        }

        .range {
            display: inline-block;
            transform: rotate(-90deg) translate(274px, -57px);
        }

        .range>input[type="range"] {
            -webkit-appearance: none;
            /*去除默认样式*/
            background-color: rgb(193, 222, 255);
            width: 250px;
            height: 4px;
            padding: 0;
            border: none;
            box-shadow: -8px 3px 7px 0px rgb(0 0 0 / 12%);
        }

        .range>input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            /*去除默认样式*/
            cursor: default;
            top: 0;
            height: 20px;
            width: 20px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 15px;
            border: 5px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }




        /* ------------------------右边的颜色选择------------------------ */
        .colorContainer {
            margin-right: 20px;
            width: 35px;
            height: 100%;
        }

        .colors {
            display: block;
            width: 35px;
            height: 35px;
            border-radius: 999px;
            border: 1px solid rgb(216, 216, 216);
            transition: 0.4s ease;
        }

        #color {
            opacity: 0;
        }

        .colorSelect {
            margin: 20px auto;
            width: 30px;
            /* height: 240px; */
            background-color: rgb(166, 159, 255);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            overflow: hidden;
            box-shadow: 0px 1px 9px 0px rgba(99, 133, 95, 0.26);
            cursor: pointer;
        }

        .colorSelect>li {
            flex: auto;
            height: 30px;
            background-color: rgb(125, 213, 248);
        }

        .colorSelect>li:not(li:nth-of-type(1)) {
            border-top: 2px rgb(255, 255, 255) solid;
        }

        /*保存和打开*/
        div.save-open-clear {
            position: absolute;
            display: flex;
            justify-content: space-between;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 280px;
        }

        div.save-open-clear .save,
        div.save-open-clear .open,
        div.save-open-clear .clear {
            text-align: center;
            line-height: 40px;
            width: 80px;
            height: 40px;
            border-width: 0px;
            border-radius: 999px;
            /* 边框半径 */
            box-shadow: 0px 0px 0px 0px #0000;
            background: #3496f8;
            /* 背景颜色 */
            cursor: pointer;
            /* 鼠标移入按钮范围时出现手势 */
            outline: none;
            color: white;
            /* 字体颜色 */
            font-size: 16px;
            /* 字体大小 */
            transition: 0.4s ease;
        }

        div.save-open-clear .clear {
            background-color: rgb(255, 85, 85);
        }

        div.save-open-clear .save:hover,
        div.save-open-clear .open:hover,
        div.save-open-clear .clear:hover {
            transition: 0.4s ease;
            transform: translateY(4px);
            box-shadow: 0px 2px 6px 0px rgba(20, 50, 116, 0.397);
        }
    </style>
</head>

<body>
    <div class="svgContainer">
        <!-- 中间工具 -->
        <section class="toolContainer">
            <div class="tool-rangeBox">
                <input type="radio" name="toolselect" id="icon-bi" checked>
                <input type="radio" name="toolselect" id="icon-wenzi" >
                <input type="radio" name="toolselect" id="icon-zhixian">
                <input type="radio" name="toolselect" id="icon-yuanxing">
                <input type="radio" name="toolselect" id="icon-juxing">
                <input type="radio" name="toolselect" id="icon-yuanjiaojuxing">
                <input type="radio" name="toolselect" id="icon-xiangpica">
                <div class="toolbar">
                    <label for="icon-bi" class="iconfont icon-bi" title="pen"></label>
                    <label for="icon-wenzi" class="iconfont icon-wenzi" title="text"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" width="40" height="35" fill="white" style="padding-top: 3px;"><path d="M692.25 882.78H331.71v-30.68a563.31 563.31 0 0 1 48.08-14.83c16.20-4.27 33.65-7.75 52.39-10.63v-630.34h-136.73l-57.24 151.53H211.23c-2.16-14.11-3.96-30.23-5.41-48.23-1.45-17.93-2.68-36.30-3.79-55.10-1.11-18.59-1.96-37.07-2.65-55.01C198.62 171.53 198.25 155.35 198.25 141.21h627.48c0 14.14-0.39 30.09-1.11 47.68-0.74 17.65-1.65 35.85-2.76 54.56s-2.13 37.07-3.25 55.10c-1.08 17.99-2.70 34.48-4.90 49.28h-28.40l-56.75-151.53H592.88V826.68c18.71 3.56 36.22 7.07 52.36 10.63 16.22 3.50 31.85 8.41 47.00 14.83v30.63z" p-id="2920"></path></svg></label>
                    <label for="icon-zhixian" class="iconfont icon-zhixian" title="line"></label>
                    <label for="icon-yuanxing" class="iconfont icon-yuanxing" title="circle"></label>
                    <label for="icon-juxing" class="iconfont icon-juxing" title="rectangle"></label>
                    <label for="icon-yuanjiaojuxing" class="iconfont icon-yuanjiaojuxing" title="rounded rectangle"></label>
                    <label for="icon-xiangpica" class="iconfont icon-xiangpica" title="eraser"></label>
                </div>

                <span class="range">
                    <input type="range" max="10" min="1" id="widthInput" value="2">
                </span>
                <em>2</em>
                <input type="checkbox" id="fillstart-input">
                <label class="fill" for="fill-input" style="background-color: #70ffe7;"><input type="color"
                        id="fill-input" value="#70FFE7"></label>
                <label class="fillstart" for="fillstart-input">Fill</label>
            </div>

            <div class="colorContainer">
                <label class="colors" for="color" style="background-color: rgb(0, 47, 93);">
                    <input type="color" id="color"> <!--当input-color 改变时，对应的背景颜色改变-->
                </label>
                <ul class="colorSelect">
                    <li style="background-color: rgb(0, 0, 0);"></li>
                    <li style="background-color: rgb(241, 167, 154);"></li>
                    <li style="background-color: rgb(255, 217, 128);"></li>
                    <li style="background-color: rgb(172, 238, 163);"></li>
                    <li style="background-color: rgb(49, 245, 131);"></li>
                    <li style="background-color: rgb(77, 250, 198);"></li>
                    <li style="background-color: rgb(154, 182, 241);"></li>
                    <li style="background-color: rgb(228, 137, 255);"></li>
                    <li style="background-color: rgb(253, 136, 191);"></li>
                    <li style="background-color: rgb(255, 255, 255);"></li>
                </ul>
            </div>
        </section>
        <div class="save-open-clear">
            <button class="save">save</button>
            <button class="open">open</button>
            <div class="clear">clear</div>
            <input type="file" id="fileInput" accept=".svg" hidden>
        </div>
        <div class="svgparent">
            <svg class="svg" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
        </div>

    </div>
</body>

</html>
<script>
    function $(s) {
        return document.querySelector(s);
    }
    function is_touch_device() {
        try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
    }
    let Touch = is_touch_device();
    let svgContainer = $('div.svgContainer')
    let svg = $('.svg')
    let svgparent = $('.svgparent')
    //  下面这块是左边工具的变量名
    let toolContainer = $('.toolContainer')   // 中间工具栏那块，把svgContainer挡住了，所以事件监听再判断一个
    let colorContainer = $('.colorContainer')  // 屏幕右边颜色调和colorinput的容器
    let toolRangeBox = $('.tool-rangeBox')   // 左边所有工具的容器
    let range = $('.range')   // 滑动条
    let rangeText = $('em')  // 滑动条的数字显示
    let fillColor = $('input[id="fill-input"]')   // 背景色的input
    let labelFill = $('.fill')    //背景色的input关联的label
    let fillStart = $('input[id="fillstart-input"]')  // 启动fill的按钮
    // 下面这块是右边工具的变量名
    let colorSelectUl = $('.colorSelect') // 右边那一条的颜色框
    let colorSelectLis = colorSelectUl.children     /// 这个是颜色框里面的每一个颜色
    let laberColors = $('label.colors')      // input 外面的label 
    let colorInput = $('input[id="color"]')  // input颜色选择器
    let widthInput = $('input[type="range"]')  //笔画粗细

    // 各种图画工具的变量名
    let pen = $('#icon-bi')
    let text = $('#icon-wenzi')
    let linear = $('#icon-zhixian')
    let circle = $('#icon-yuanxing')
    let rect = $('#icon-juxing')
    let eraser = $('#icon-xiangpica')
    let roundrect = $('#icon-yuanjiaojuxing')

    let saveFile = $('.save')
    let openFile = $('.open')
    let fileInput = $('#fileInput')
    let clear = $('.clear')
    let = drawandnosave = false   // 没有修改过画面。为true  // 用来判断是否需要保存
    let isDrawPolygon = false  // 定义当前是否有多边形正在画
    let inputList = toolContainer.querySelectorAll("input[name=toolselect]");
    let preTool;
    let body = document.body;
    for (let i = 0; i < inputList.length; ++i) {
        if (inputList[i].checked) { preTool = inputList[i]; toolContainer.querySelector('label[for=' + preTool.id + ']').classList.add('selected'); break; }
    }
    toolRangeBox.onclick = () => {
        for (let i = 0; i < inputList.length; ++i) {
            if (inputList[i].checked) { toolContainer.querySelector('label[for=' + preTool.id + ']').classList.remove('selected'); preTool = inputList[i]; toolContainer.querySelector('label[for=' + preTool.id + ']').classList.add('selected'); break; }
        }
    }
    function onpaint(e) {
        //背景色改变
        if (labelFill.contains(e.target)) {
            svgContainer.addEventListener('mouseup', (fillE) => {
                labelFill.style.backgroundColor = fillColor.value
            })
        }

        // 下面是改变input颜色选择器的外面label的颜色也跟着改变
        else if (laberColors.contains(e.target)) {    // 这个是修改颜色，把html那个颜色样式也修改
            svgContainer.addEventListener('mouseup', (colosE) => {
                laberColors.style.backgroundColor = colorInput.value
            })

        }

        // 下面是改变滑动条的数字显示
        if (range.contains(e.target)) {     // 修改滑动条的那个文字
            svgContainer.addEventListener('mousemove', function rangeE() {
                rangeText.textContent = range.lastElementChild.value
            })
        }

        // 下面是点击右边几个默认颜色，上面的input颜色选择器也跟改，并且svg画图颜色也更改
        if (colorSelectUl.contains(e.target)) {
            var i;
            for (i = 0; i < colorSelectLis.length; i++) {
                if (colorSelectLis[i].contains(e.target)) { break; }
            }
            if (i < colorSelectLis.length) {
                laberColors.style.backgroundColor = colorSelectLis[i].style.backgroundColor;
                colorInput.value = colorSelectLis[i].style.backgroundColor.colorHex();
            }
        }

        // 下面这个判断的意思是，是中间那块大的toolContainer 但不是两边小的工具容器和颜色容易，就是两边两块工具, 所有工具实现都在这个if里面
        if ((svg.contains(e.target) || toolContainer.contains(e.target)) && !(colorContainer.contains(e.target) || (toolRangeBox.contains(e.target)))) {

            drawandnosave = true;   // 改过了画面

            if (pen.checked || eraser.checked) {
                // console.log(1)
                let penStartPos = mousePos(svg)   // 拿到鼠标开始画的位置
                let polyline = newNS('polyline')
                // 添加一堆Attribute
                if (pen.checked) {
                    polyline.setAttribute('stroke', colorInput.value);
                } else if (eraser.checked) {
                    polyline.setAttribute('stroke', '#ffffff');
                }

                polyline.setAttribute('stroke-width', widthInput.value)
                polyline.setAttribute('stroke-linecap', 'round')
                polyline.setAttribute('stroke-linejoin', 'round')
                if (fillStart.checked) {
                    polyline.setAttribute('fill', fillColor.value)
                } else {
                    polyline.setAttribute('fill', 'none')
                }

                svg.append(polyline)
                // console.log(2)
                let points = `${penStartPos.x} ${penStartPos.y} `   // 鼠标坐标
                polyline.setAttribute('points', points)   // 位置属性

                function drawDot(e) {   // 鼠标持续移动，持续触发这函数，持续画线
                    let penMovePos = mousePos(svg);
                    let line = newNS('line');
                    points += `${penMovePos.x} ${penMovePos.y} `;
                    polyline.setAttribute('points', points);
                }
                if (Touch) {
                    svgContainer.addEventListener('touchmove', drawDot);
                    svgContainer.addEventListener('touchend', () => { removeTouch(drawDot); });
                }
                else {
                    svgContainer.addEventListener('mousemove', drawDot);
                    svgContainer.addEventListener('mouseup', () => { removeMouse(drawDot) });
                }
            }
            // 下面是输入文字
            else if(text.checked){
                let txt = newNS('text');
                txt.
                svg.append(txt);
            }

            // 下面是画圆形,椭圆
            else if (circle.checked) {
                let ellipse = newNS('ellipse')   // 创建圆的标签
                svg.append(ellipse)  // 插入svg
                // 然后加一堆属性
                ellipse.setAttribute('stroke', colorInput.value)
                ellipse.setAttribute('stroke-width', widthInput.value)
                if (fillStart.checked) {
                    ellipse.setAttribute('fill', fillColor.value)
                } else {
                    ellipse.setAttribute('fill', 'none')
                }

                let startPos = mousePos(svg)   // 获取鼠标相对svg的位置

                function drawEllipse() {
                    let currPos = mousePos(svg)
                    let cx = (startPos.x + currPos.x) / 2
                    let cy = (startPos.y + currPos.y) / 2
                    ellipse.setAttribute('cx', cx)
                    ellipse.setAttribute('cy', cy)
                    let rx = Math.abs(startPos.x - currPos.x) / 2
                    let ry = Math.abs(startPos.y - currPos.y) / 2
                    ellipse.setAttribute('rx', rx)
                    ellipse.setAttribute('ry', ry)
                }

                if (Touch) {
                    svgContainer.addEventListener('touchmove', drawEllipse);
                    svgContainer.addEventListener('touchend', () => { removeTouch(drawEllipse); });
                }
                else {
                    svgContainer.addEventListener('mousemove', drawEllipse);
                    svgContainer.addEventListener('mouseup', () => { removeMouse(drawEllipse) });
                }
            }

            // 矩形和圆角矩形
            else if (rect.checked || roundrect.checked) {
                // cosole.log(111)
                let rect = newNS('rect')
                svg.append(rect)
                let rectStartPos = mousePos(svg)   // 鼠标位置

                rect.setAttribute('stroke', colorInput.value)
                rect.setAttribute('stroke-width', widthInput.value)
                rect.setAttribute('x', rectStartPos.x)
                rect.setAttribute('y', rectStartPos.y)
                if (fillStart.checked) {
                    rect.setAttribute('fill', fillColor.value);
                } else {
                    rect.setAttribute('fill', 'none')
                }

                function drawRect() {
                    let rectMovePos = mousePos(svg)

                    let x = rectStartPos.x
                    let y = rectStartPos.y
                    let rx, ry
                    // 右下角往左上角画矩形 

                    if (rectMovePos.x < rectStartPos.x) {
                        x = rectMovePos.x
                    }
                    if (rectMovePos.y < rectStartPos.y) {
                        y = rectMovePos.y
                    }

                    let width = Math.abs(rectStartPos.x - rectMovePos.x)   // 一正一负，而宽高只能是正
                    let height = Math.abs(rectStartPos.y - rectMovePos.y)

                    // 圆角矩形
                    if (roundrect.checked) {
                        if (width < 50 && height < 50) {
                            rx = (width + height) / 10
                            ry = (width + height) / 10
                        } else {
                            rx = (Math.min(width, height) - 50) / 50 + 10
                            ry = (Math.min(width, height) - 50) / 50 + 10
                        }
                    }

                    rect.setAttribute('width', width)
                    rect.setAttribute('height', height)
                    rect.setAttribute('x', x)
                    rect.setAttribute('y', y)
                    rect.setAttribute('rx', rx)
                    rect.setAttribute('ry', ry)

                }

                if (Touch) {
                    svgContainer.addEventListener('touchmove', drawRect);
                    svgContainer.addEventListener('touchend', () => { removeTouch(drawRect); });
                }
                else {
                    svgContainer.addEventListener('mousemove', drawRect);
                    svgContainer.addEventListener('mouseup', () => { removeMouse(drawRect) });
                }
            }

            // 直线
            else if (linear.checked) {
                let linear = newNS('line')
                svg.append(linear)
                let linearStartPos = mousePos(svg)

                linear.setAttribute('stroke', colorInput.value)
                linear.setAttribute('stroke-width', widthInput.value)
                linear.setAttribute('stroke-linecap', 'round')
                linear.setAttribute('stroke-linejoin', 'round')
                linear.setAttribute('x1', linearStartPos.x)
                linear.setAttribute('y1', linearStartPos.y)
                linear.setAttribute('x2', linearStartPos.x)
                linear.setAttribute('y2', linearStartPos.y)
                if (fillStart.checked) {
                    linear.setAttribute('fill', fillColor.value)
                } else {
                    linear.setAttribute('fill', 'none')
                }

                function drawLinear() {
                    let linearMoverPos = mousePos(svg)

                    linear.setAttribute('x2', linearStartPos.x + (linearMoverPos.x - linearStartPos.x)) // 鼠标初始位置加上终点位置减去起始位置
                    linear.setAttribute('y2', linearStartPos.y + (linearMoverPos.y - linearStartPos.y))
                }

                if (Touch) {
                    svgContainer.addEventListener('touchmove', drawLinear);
                    svgContainer.addEventListener('touchend', () => { removeTouch(drawLinear); });
                }
                else {
                    svgContainer.addEventListener('mousemove', drawLinear);
                    svgContainer.addEventListener('mouseup', () => { removeMouse(drawLinear) });
                }
            }
        }
    }
    svgContainer.addEventListener('mousedown', onpaint);
    svgContainer.addEventListener('touchstart', onpaint);

    function newNS(s){
        return document.createElementNS("http://www.w3.org/2000/svg",s)
    }
    // 清除所画内容
    clear.addEventListener('click', (clickE) => {
        svg.innerHTML = ''
    })
    // 打开一个新文件
    openFile.addEventListener('click', function openLoaclFile() {
        if (drawandnosave) {
            var answer = confirm('当前绘画未保存，确定要打开新文件吗？')
            if (answer == false) {
                return
            }
        }
        fileInput.click()   // 如果用户点击是
    })

    fileInput.addEventListener('change', e => {
        var svgFile = fileInput.files[0]
        var fr = new FileReader()

        fr.addEventListener('load', () => {
            var svgFileContent = fr.result
            svgparent.innerHTML = svgFileContent
            svg = $('.svg')
        })
        fr.readAsText(svgFile)
    })

    // 撤销
    document.addEventListener("keydown", function (event) {
        if (event.code == "KeyZ" && (event.ctrlKey || event.metaKey)) {
            if (svg.lastChild) svg.lastChild.remove()
        }
    })

    // 下面是退出浏览器提示
    // window.addEventListener('beforeunload', e => {
    //   if (drawandnosave) {
    //     return e.returnValue = '还未保存，是否要退出?'
    //   }
    // })

    // 将图画保存到桌面
    saveFile.addEventListener('click', function save() {
        drawandnosave = false

        var svgSource = svg.outerHTML
        var blob = new Blob(['<?xml version="1.0" encoding="utf-8"?>', svgSource], { type: "image/xml+svg" })
        var url = URL.createObjectURL(blob)
        var anchor = document.createElement("a")
        anchor.href = url
        anchor.download = "xxxx.svg"
        anchor.click()  // 点击button 也触发a标签点击
        anchor.remove();
    })


    function removeTouch(e) {
        svgContainer.removeEventListener('touchmove', e);
        svgContainer.removeEventListener('touchend', removeTouch);
    }
    function removeMouse(e) {
        svgContainer.removeEventListener('mouseup', removeMouse);
        svgContainer.removeEventListener('mousemove', e)
    }
    //  鼠标相对于元素的位置
    function mousePos(node) {
        var box = node.getBoundingClientRect();
        let t;
        if (Touch) {
            t = window.event.touches[0];
        } else { t = window.event; }
        return {
            x: t.clientX - box.x,
            y: t.clientY - box.y,
        }
    }

    function move(obj, tgt, size) {
        obj.onmousedown = function (e) { //鼠标按下事件
            var z = tgt.style.zIndex;
            // z < tran.maxZ ? (tgt.style.zIndex = tran.maxZ = tran.maxZ + 1) : 0;
            e = e || window.event; //事件对象
            var x_down = e.clientX; //鼠标按下X的坐标
            var y_down = e.clientY; //鼠标按下Y的坐标
            var h = tgt.offsetHeight;
            var w = tgt.offsetWidth;
            var leftDown = tgt.offsetLeft || x_down - parseFloat(tgt.lastW) / 2; //获取盒子的初始left值,如果是全屏化则。。。
            var topDown = tgt.offsetTop; //获取盒子的初始top值
            tgt.lastH ? 0 : (tgt.lastH = h + 'px', tgt.lastW = w + 'px');
            if (size) { tgt.style.cssText += "max-height:none;max-width:none;min-width:auto;min-height:auto;" }
            var th = tgt.style.height,
                tw = tgt.style.width;
            function mousemove(e) { //鼠标移动事件
                e = e || window.event;
                var x = e.clientX;
                var y = e.clientY;
                var dx = x - x_down;
                var dy = y - y_down;
                if (size) {
                    tgt.style.width = tgt.lastW = w + dx + 'px';
                    tgt.style.height = tgt.lastH = h + dy + 'px';
                }
                else {
                    if (y < 5 || x < 5 || window.innerWidth - x < 5) {//靠近顶部全屏
                        tgt.style.cssText += "max-height:none;max-width:none;min-width:auto;min-height:auto;"
                        tgt.style.top = window.pageYOffset + 'px';
                        tgt.style.height = '100%';
                        tgt.style.left = window.innerWidth - x < 5 ? '50%' : 0;
                        tgt.style.width = y < 5 ? '100%' : '50%';
                    } else {
                        tgt.style.top = topDown + dy + 'px';
                        tgt.style.left = leftDown + dx + 'px';
                        tgt.style.height = (th == '100%' || th == body.offsetHeight + 'px') ? tgt.lastH : (h + 'px');
                        tgt.style.width = (tw == '100%' || tw == '50%' || tw == body.offsetWidth + 'px') ? tgt.lastW : (w + 'px');
                    }
                }
            }
            function  mouseup(e){
                if(!size){
                if(e.clientY<5){//靠近顶部全屏
                    tgt.style.top=window.pageYOffset+'px';
                    tgt.style.cssText='left:0;width:100%;height:100%';
                }else if(e.clientX<5){ // 靠近左边左半屏
                    tgt.style.top=window.pageYOffset+'px';
                    tgt.style.cssText='left:0;width:50%;height:100%';
                }else if(window.clientX-e.clientX<5){ // 靠近右半边右半屏
                    tgt.style.top=window.pageYOffset+'px';
                    tgt.style.cssText='right:0;width:50%;height:100%';
                }}
                document.removeEventListener('mousemove',mousemove);
                document.removeEventListener('mouseup',mouseup);
                return false;
            }
            document.addEventListener("mousemove",mousemove);
            document.addEventListener("mouseup",mouseup);
            tgt.lastX ? 0 : (tgt.lastX = tgt.offsetLeft, tgt.lastY = tgt.offsetTop);
            e.stopPropagation();
            return false //阻止默认事件
        }
    }

    String.prototype.colorHex = function () {
        // RGB颜色值的正则
        var reg = /^(rgb|RGB)/;
        var color = this;
        if (reg.test(color)) {
            var strHex = "#";
            // 把RGB的3个数值变成数组
            var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
            // 转成16进制
            for (var i = 0; i < colorArr.length; i++) {
                var hex = Number(colorArr[i]).toString(16);
                if (hex === "0") {
                    hex += hex;
                }
                strHex += hex;
            }
            return strHex;
        } else {
            return String(color);
        }
    }
</script>